<template>
  <div class="CommodityInformationManagementEdit">
    <div class="CommodityInformationManagementEdit-model">
      <div class="CommodityInformationManagementEdit-model-three">
        <div class="CommodityInformationManagementEdit-model-three-one">
          一级品类
        </div>
        <div class="CommodityInformationManagementEdit-model-three-three">
          <div>
            <el-form
              size="mini"
              :model="tagform"
              class="myform"
              :rules="rules"
              ref="tagform"
              label-position="top"
            >
              <div>
                <el-form-item label="品类名称" prop="title" class="myform-item">
                  <el-input
                    v-model="tagform.title"
                    placeholder="请输入品类名称"
                    :disabled="tagform.title == '形制'"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="listorder">
                  <el-input
                    v-model="tagform.listorder"
                    placeholder="请输入排序"
                    clearable
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="onClickSubmit('tagform')"
                    >提 交</el-button
                  >
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div
      class="CommodityInformationManagementEdit-model"
      style="margin-top: 20px"
    >
      <div class="CommodityInformationManagementEdit-model-three">
        <div class="CommodityInformationManagementEdit-model-three-one">
          二级品类
        </div>
        <div class="CommodityInformationManagementEdit-model-three-three">
          <div>
            <el-form
              size="mini"
              :model="tagformTwo"
              class="myform"
              :rules="rulesTwo"
              ref="tagformTwo"
              label-position="top"
            >
              <div>
                <el-form-item
                  label="新增二级品类名"
                  prop="title"
                  class="myform-item"
                >
                  <el-input
                    v-model="tagformTwo.title"
                    placeholder="请输入二级品类名"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="新增品类排序" prop="listorder">
                  <el-input
                    v-model="tagformTwo.listorder"
                    placeholder="请输入新增品类排序"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 37px; margin-left: 40px">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="onClickSubmitTwo('tagformTwo')"
                    >提 交</el-button
                  >
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <div>
          <el-table :data="tableData" border style="width: 100%" size="mini">
            <el-table-column
              label="品类"
              align="center"
              prop="title"
            ></el-table-column>
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="{ row }">
                <div v-if="row.status == 1" style="color: #67c23a">已启用</div>
                <div v-else style="color: #f56c6c">已禁用</div>
              </template>
            </el-table-column>
            <el-table-column
              label="排序"
              align="center"
              prop="listorder"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="{ row }">
                <el-button type="text" size="mini" @click="onUpdate(row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  v-if="row.status == 1"
                  style="color: #f56c6c"
                  @click="onDelete(row.id, 0)"
                  size="mini"
                  >禁用</el-button
                >
                <el-button
                  type="text"
                  v-else
                  style="color: #67c23a"
                  @click="onDelete(row.id, 1)"
                  size="mini"
                  >启用</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog title="修改二级品类" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="tagformTwo"
        :rules="rules"
        size="mini"
        ref="tagformTwo"
        label-width="190px"
      >
        <el-form-item label="二级品类名称" prop="title">
          <el-input
            v-model="tagformTwo.title"
            placeholder="请输入品类名称"
            clearable
            style="width: 70%"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序(数字越大越靠前)" prop="listorder">
          <el-input
            v-model="tagformTwo.listorder"
            placeholder="请输入排序"
            clearable
            style="width: 70%"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onClickSubmitTwo('tagformTwo')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  postApigetcategory,
  postApieditcategory,
  postApidisablecategory,
} from "@/api";
export default {
  data() {
    return {
      dialogVisible: false,
      row: "",
      tagformTwo: {
        listorder: "",
        title: "",
        fid: 0,
      },
      rulesTwo: {
        title: [{ required: true, message: "请输入品类名称", trigger: "blur" }],
        listorder: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      tagform: {
        id: "",
        title: "",
        listorder: "",
        fid: 0,
      },
      rules: {
        title: [{ required: true, message: "请输入品类名称", trigger: "blur" }],
        listorder: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      tableData: [],
    };
  },
  activated() {
    let row = this.$route.query.row;
    row = JSON.parse(this.decrypt(row));
    this.tagform = {
      id: row.id,
      title: row.title,
      listorder: row.listorder,
      fid: 0,
    };
    this.tagformTwo.fid = row.id;
    this.postApigetcategory();
  },
  methods: {
    // 修改
    onUpdate(e) {
      this.tagformTwo = {
        id: e.id,
        title: e.title,
        listorder: e.listorder,
        fid: e.fid,
      };
      this.dialogVisible = true;
    },
    onEdit(e) {
      this.dialogVisible = true;
      this.tagformTwoEdit.id = e.id;
      this.tagformTwoEdit.title = e.title;
      this.tagformTwoEdit.listorder = e.listorder;
    },
    async postApigetcategory() {
      let { tagform } = this;
      let obj = {
        title: "",
        fid: tagform.id,
        page: 1,
        size: 10000,
      };
      let res = await postApigetcategory(obj);
      this.tableData = res.data;
    },
    // 禁用
    onDelete(id, status) {
      let obj = {
        id,
        status,
      };
      console.log(obj);
      this.$confirm(`确定${status == 1 ? "启用" : "禁用"}该品类?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postApidisablecategory(obj).then((res) => {
            this.postApigetcategory();
          });
        })
        .catch(() => {});
    },
    // 提交品类信息
    onClickSubmit(tagformtext) {
      let that = this;
      let { tagform } = this;
      this.$refs[tagformtext].validate(async (valid) => {
        if (valid) {
          postApieditcategory(tagform).then((res) => {
            that.$message({
              type: "success",
              message: `保存成功!`,
            });
          });
        } else {
          return false;
        }
      });
    },
    // 提交二级品类信息
    onClickSubmitTwo(tagformtext) {
      let that = this;
      let { tagformTwo } = this;
      this.$refs[tagformtext].validate(async (valid) => {
        if (valid) {
          postApieditcategory(tagformTwo).then((res) => {
            this.postApigetcategory();
            that.$message({
              type: "success",
              message: `保存成功!`,
            });
            this.tagformTwo.title = "";
            this.tagformTwo.listorder = "";
            this.dialogVisible = false
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  > div {
    display: flex;
  }
  &-item {
    margin-right: 80px;
  }
}
.CommodityInformationManagementEdit {
  .CommodityInformationManagementEdit-model {
    background: #ffffff;
    // padding: 20px;
    border-radius: 10px;
    .CommodityInformationManagementEdit-model-one {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > div:nth-child(1) {
        display: flex;
        align-items: center;
        font-weight: 800;
        > div:nth-child(1) {
          background: #409eff;
          width: 4px;
          height: 30px;
          border-radius: 2px;
          margin-right: 10px;
        }
      }
    }
    .CommodityInformationManagementEdit-model-three {
      margin-top: 10px;
      background: #ffffff;
      padding: 20px;
      border-radius: 4px;
      .CommodityInformationManagementEdit-model-three-one {
        font-weight: 800;
      }

      .CommodityInformationManagementEdit-model-three-three {
        margin-top: 20px;
        > div:nth-child(1) {
          display: flex;
          align-items: center;
          > div {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>